import React, { useEffect, useRef, useState, } from 'react';
import {flushSync} from 'react-dom'
import type { FlipCardProps } from '../type';
import './index.less';
const FlipCard: React.FC<FlipCardProps> = (props) => {
  const lastVal = useRef(props.value);
  const [isAbs, setIsAbs] = useState(false);
  const [lastDistance, setLastDistance] = useState(0);
  const [lastTime, setLastTime] = useState(0);
  const [isReRender, setIsReRender] = useState(false);
  const [newStyle, setNewStyle] = useState({
    transform: `translateY(0px)`,
  });
  const { value } = props;
  const transitionRef=useRef<HTMLElement>(null)
  // useEffect(() => {
  //   lastVal.current = '0';
  // }, []);
  useEffect(() => {
    //是否小于0
    console.log('上次的值', lastVal.current);
    const isDifference = Number(value) - Number(lastVal.current) < 0;
    setIsAbs(isDifference);
    //计算两次差值的绝对值
    const chazhi = Math.abs(Number(value) - Number(lastVal.current));
    let distance = 0;
    let time = 0;
    if (isDifference) {
      //小于0时总共位移距离。
      distance = -40 * Number(lastVal.current) - (10 - chazhi) * 40;
      //使用ref也可以改变
      // transitionRef.current.style.transform=`translateY(${distance}px)`
      time = (9 - Number(lastVal.current)) * 0.1;
      console.log(time, 1 - time);
      setLastTime(time);
    } else {
      distance = -40 * Number(value);
      // transitionRef.current.style.transform=`translateY(${distance}px)`
      time = 1;
      setLastTime(time);
    }
    setNewStyle({
        //总位移距离超出总高度时只位移到最底部，注意1到0时问题，<=0必须而不是<,总时间一秒钟故而这里的时间只能是上次数值到9的差值乘0.1秒。
        transitionDuration: `${time}s`,
        transform: `translateY(${
        distance + 10 * 40 <= 0 ? -9 * 40 : distance
      }px)`,
      
    });
    setLastDistance(distance);
    lastVal.current = value;
  }, [value]);
  useEffect(() => {
    let timer: NodeJS.Timer | undefined = undefined;
    if (isAbs) {
      const newDistance = lastDistance + 10 * 40;
      if (newDistance <= 0) {
        timer = setTimeout(() => {
            //上次开始移动后，移动到9回到顶部
         flushSync(()=>{
          transitionRef.current.style.transitionDuration=`0s`
          transitionRef.current.style.transform=`translateY(${0}px)`
         }) 
         transitionRef.current.style.transitionDuration=`${1-lastTime}s`
          transitionRef.current.style.transform=`translateY(${newDistance}px)`
          // setNewStyle({
          //     transform:`translateY(${newDistance}px)`,
          //     transitionDuration: `${1-lastTime}s`
          // })
          setLastDistance(newDistance)
          // setIsReRender(true);
        }, lastTime * 1000);
        setIsAbs(false);
      }
    }
    return () => {
      clearTimeout(timer);
    };
  }, [newStyle]);
  // useEffect(() => {
  //   if (isReRender) {
  //     const newDistance = lastDistance + 10 * 40;
  //     //回到顶部后用剩余的时间来进行向下位移
  //     setNewStyle({
  //       transform: `translateY(${newDistance}px)`,
  //       transitionDuration: `${1 - lastTime}s`,
  //     });
  //     setIsReRender(false);
  //   }
  // }, [isReRender]);

  const array: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  return (
    <>
      <div className="flip-wrap" ref={transitionRef} style={newStyle}>
        {array.map((item, index) => {
          return (
            <div key={index} className="flip-box">
              <span className="flip-box-number">{item}</span>
            </div>
          );
        })}
      </div>
    </>
  );
};
export default FlipCard;
